<template>
  <div class="warp">
    <div class="img" @click="handleToDetail">
      <img :src="hotel_info.photos" alt />
    </div>
    <div class="info">
      <h2 @click="handleToDetail">{{hotel_info.name}}</h2>
      <span>{{hotel_info.alias}}</span>
      <p>
        <span class="iconfont iconxiaoxingxing">
          <el-rate
            v-model="value"
            disabled
            show-score
            text-color="#ff9900"
            :score-template="'{value}'+ star+'分'"
          ></el-rate>
        </span>
        <i>
          <span>{{hotel_info.all_remarks}}</span>条评论
        </i>
        <em>
          <span>{{hotel_info.common_remarks}}</span>篇游记
        </em>
      </p>
      <span class="locatedMark" @click="toTop">
        <i class="iconfont icondingwei"></i>
        {{hotel_info.address}}
      </span>
    </div>
    <div class="price">
      <ul>
        <li v-for="(item, index) in hotel_info.products" :key="index" class="priceBox">
          <span>{{item.name}}</span>
          <i>
            <em>${{item.price}}</em>起 >
          </i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import loginVue from "~/pages/user/login.vue";
export default {
  props: ["hotel_info"],
  data() {
    return {
      //酒店评分
      value: Number(this.hotel_info.stars),
    };
  },
  created() {},
  computed: {
    star() {
      return this.value % 1 != 0 ? "" : ".0";
    },
  },
  mounted() {
    // 此处true需要加上，不加滚动事件可能绑定不成功
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleToDetail() {
      this.$emit("handleToDetail");
    },
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 500;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
      //发送点击事件
      this.$emit("handleClick");
    },
  },
};
</script>

<style lang="less" scoped>
.locatedMark:hover {
  cursor: pointer;
}
.warp {
  padding: 30px 15px;
  display: flex;
  justify-content: space-between;
  //分割线
  border-bottom: 1px solid rgb(238, 238, 238);
  // padding-bottom: 10px;

  .img {
    width: 360px;
    height: 210px;
    cursor: pointer;
    img {
      width: 350px;
      height: 200px;
      object-fit: cover;
      overflow: hidden;
    }
  }
  .info {
    flex: 1;
    padding-left: 20px;
    padding-right: 36px;
    h2 {
      font-weight: 400;
      font-size: x-large;
      cursor: pointer;
    }
    span {
      color: rgb(78, 78, 78);
      font-size: 16px;
      padding: 5px 0;
      //图标
      i {
        font-size: 18px;
        color: black;
      }
    }
    p {
      padding: 12px 0;
      font-size: 15px;
      display: flex;
      align-items: center;
      span {
        width: 160px;
      }
      i {
        padding-left: 20px;

        flex: 1;
        span {
          color: rgb(255, 164, 27);
        }
      }
      em {
        width: 80px;
        span {
          color: rgb(255, 164, 27);
        }
      }
    }
  }
  .price {
    font-size: 14px;
    padding-top: 20px;
    width: 190px;
    color: rgb(78, 78, 78);
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgb(238, 238, 238);
      padding: 16px 20px;
      i {
        em {
          color: rgb(255, 117, 71);
        }
      }
    }
  }
}
/deep/ .iconxiaoxingxing {
  &::before {
    display: none;
  }
}
.priceBox:hover {
  background-color: rgba(179, 183, 189, 0.08);
  cursor: pointer;
}
</style>